<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // 解构赋值   --- 声明变量去接受数组或者对象中的值
        //   数组的解构
        //   对象的解构    具有无序性

        {
            const arr = [1, 2, 3];
            // let a = arr[0];
            // let b = arr[1];
            // let c = arr[2];

            let [a, b, c] = arr;
        }


        // const a = 1 ;
        // const b = 2 ;
        // const c = 3 ;

        // 解构赋值
        //   声明三个变量   a b c
        // const [a, b, c] = [1, 2, 3];

        // console.log(a, b, c);

        // const [x, y] = [1, [2, 3]];
        // console.log(x);
        // console.log(y);


        // const [m, [n]] = [1, [2, 3]];
        // console.log(m);
        // console.log(n);


        const [m, [, n]] = [1, [2, 3, 4]];
        console.log(m);
        console.log(n);   // 3


        // 交换两个变量的值
        let a = 1;
        let b = 2;
        [a, b] = [b, a];



        // 对象的解构

        // const name = 'yy' ;
        // const age = 17 ;

        // const { name, age } = { name: 'yy', age: 17 };   // 简写
        // const {name : name , age : age} = { name: 'yy', age: 17 };

        // console.log(name, age);



        // const cat = {
        //     name: '橘猫',
        //     color: 'yellow',
        //     say: function () {
        //         console.log('喵');
        //     }
        // }

        // const username = '橘猫' ;
        // const colors = 'yellow' ;

        // 对象的解构   键名对应变量名   不需要管顺序
        // const { color: colors, name: username } = cat;
        // console.log(username, colors);



        const cat = {
            name: '橘猫',
            color: 'yellow',
            say: function () {
                console.log('喵');
            },
            book: {
                bookName: 'js从入门到放弃',
                price: {
                    yuanJia: 199999,
                    xianJia: 9999
                }
            }
        }

        // price  对象的嵌套解构 不能省略book   对象具有无序性
        const { book: { price: { xianJia } } } = cat;

        console.log(xianJia);



    </script>

</body>

</html>